<script lang="ts" setup>
import {computed, onMounted} from 'vue'
import Wow from 'wow.js'
import defaultBg from '@/assets/赛博朋克风格奇幻少女_集原美电脑4k壁纸3840x2160_彼岸图网.jpg'
import {Reload} from '@vicons/ionicons5'
import {BackGround} from '@/components/Background/index.ts'
import Login from './components/loginBox/index.vue'
import Register from './components/registerBox/index.vue'
import {useLogin} from './hooks/useLogin'

const {loginData, getLoginBg, changeBg} = useLogin()

onMounted(() => {
  const wow = new Wow({
    boxClass: 'wow', // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    callback: function () {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null, // optional scroll container selector, otherwise use window
  })
  wow.init()
  getLoginBg()
})
</script>

<template>
  <div class="bg-wrapper">
    <BackGround
        :url="loginData.bg_url"
        :opacity="0.2"
        height="100vh"
        width="100vw"
        class="wow bounce"
    >
      <div ref="bgWrapper" class="bg">
        <Login class="wow swing" data-wow-delay="0.6s"></Login>
        <Register v-model="loginData.isRegister"></Register>
        <div class="reload">
          <n-icon
              :size="24"
              color="#fff"
              @click="changeBg"
          >
            <Reload></Reload>
          </n-icon>
        </div>
      </div>
    </BackGround>
  </div>
</template>

<style lang="less" scoped>
.bg-wrapper {
  background-color: #3d3b4f;
  overflow: hidden;
}

.bg {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .reload {
    position: absolute;
    bottom: 0;
    right: 10px;
    cursor: pointer;
  }
}
</style>
